<!-- @author:  ******   @date:   ****** -->
<template>
     <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{path:'/'}"> 首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{path:'/competition'}"> 赛事管理</el-breadcrumb-item>
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 新增赛事</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="赛事名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="赛事标题">
                    <el-input v-model="form.headline"></el-input>
                </el-form-item>
                <el-form-item label="比赛场次">
                    <el-input v-model="form.session"></el-input>
                </el-form-item>
                <el-form-item label="报名费用">
                    <el-input v-model="form.cost"></el-input>
                </el-form-item>
                <el-form-item label="总奖金">
                    <el-input v-model="form.count"></el-input>
                </el-form-item>
                <el-form-item label="报名开始时间">
                     <el-date-picker type="datetime" placeholder="选择报名开始时间" v-model="form.start_time" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="报名结束时间">
                     <el-date-picker type="datetime" placeholder="选择报名结束时间" v-model="form.end_time" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="比赛开始时间">
                     <el-date-picker type="datetime" placeholder="选择比赛开始时间" v-model="form.game_start_time" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="比赛结束时间">
                     <el-date-picker type="datetime" placeholder="选择比赛结束时间" v-model="form.game_end_time" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="排名规则">
                    <el-select v-model="form.ranking_first" placeholder="第一种">
                        <el-option label="斩杀" value="10"></el-option>
                        <el-option label="助攻" value="20"></el-option>
                        <el-option label="死亡" value="30"></el-option>
                        <el-option label="KDA" value="40"></el-option>
                        <el-option label="比赛时长" value="50"></el-option>
                    </el-select>
                    <el-select v-model="form.ranking_second" placeholder="第二种">
                        <el-option label="斩杀" value="10"></el-option>
                        <el-option label="助攻" value="20"></el-option>
                        <el-option label="死亡" value="30"></el-option>
                        <el-option label="KDA" value="40"></el-option>
                        <el-option label="比赛时长" value="50"></el-option>
                    </el-select>
                    <el-select v-model="form.ranking_three" placeholder="第三种">
                        <el-option label="斩杀" value="10"></el-option>
                        <el-option label="助攻" value="20"></el-option>
                        <el-option label="死亡" value="30"></el-option>
                        <el-option label="KDA" value="40"></el-option>
                        <el-option label="比赛时长" value="50"></el-option>
                    </el-select>
                    <el-select v-model="form.ranking_four" placeholder="第四种">
                       <el-option label="斩杀" value="10"></el-option>
                        <el-option label="助攻" value="20"></el-option>
                        <el-option label="死亡" value="30"></el-option>
                        <el-option label="KDA" value="40"></el-option>
                        <el-option label="比赛时长" value="50"></el-option>
                    </el-select>

                </el-form-item>
                <el-form-item label="赛事规则">
                    <el-select v-model="form.competition_first" placeholder="比赛类型">
                        <!-- (1,匹配赛，2人机，4排位，5灵活组排，6大乱斗，7匹配3v3,8自定义) , -->
                        <el-option label="匹配赛" value="1"></el-option>
                        <el-option label="排位" value="4"></el-option>
                        <el-option label="灵活组排" value="5"></el-option>
                        <el-option label="大乱斗" value="6"></el-option>
                        <el-option label="自定义" value="8"></el-option>
                    </el-select>
                    <el-select v-model="form.competition_second" placeholder="地图类型">
                        <el-option label="召唤师峡谷" value="11"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="使用英雄">
                    <el-switch v-model="form.use_hero" active-text="无限" ></el-switch>
                </el-form-item>
            </el-form>
            <v-select v-if="form.use_hero" @allHero='allHero' @assassinHero='assassinHero' @fighterHero='fighterHero' @mageHero='mageHero' @marksmanHero='marksmanHero' @tankHero='tankHero' @supportHero='supportHero'></v-select>
             <el-form ref="form" :model="form" label-width="100px">
                <el-form-item label="比赛规则描述">
                    <quill-editor v-model="form.match_content" ref="myQuillEditor" class="editer" :options="form.match_editorOption" @change="match_editor_change($event)" ></quill-editor>
                </el-form-item>
                <el-form-item label="奖励规则">
                    <el-form-item label="冠军奖励">
                        <el-input v-model="form.first_place" style="width:208px"></el-input>
                        <el-select v-model="form.first_place_type" >
                            <el-option label="元" value="1"></el-option>
                            <el-option label="积分" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="亚军奖励">
                        <el-input v-model="form.second_place" style="width:208px"></el-input>
                        <el-select v-model="form.second_place_type" >
                            <el-option label="元" value="1"></el-option>
                            <el-option label="积分" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="季军奖励" >
                        <el-input v-model="form.third_place" style="width:208px"></el-input>
                        <el-select v-model="form.third_place_type" >
                            <el-option label="元" value="1"></el-option>
                            <el-option label="积分" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 继续新增排名 -->
                     <div class="" v-for="(item,index) in form.ranking_list" :key="index" style="margin:20px 0;">
                         <span>第</span>
                        <el-input v-model="item.startRanking" style="width:52px;" ></el-input>
                        <span>名</span>
                        <span>-</span>
                        <span>第</span>
                        <el-input v-model="item.endRanking" style="width:52px;" ></el-input>
                        <span>名</span>
                        <span>奖励</span>
                        <el-input v-model="item.rewardValue" style="width:84px;" ></el-input>
                        <el-select v-model="item.rewardType" >
                            <el-option label="元" value="1"></el-option>
                            <el-option label="积分" value="2"></el-option>
                        </el-select>
                    </div>
                    <el-form-item style="text-align:center;margin:20px 0;" >
                        <el-button type="primary" @click="addRanking">继续新增排名</el-button>
                    </el-form-item>
                    <!-- 排名幸运数字 -->
                    <el-form-item label="排名幸运数字">
                        <el-switch v-model="form.lucky_number" active-text="开" inactive-text="关"></el-switch>
                    </el-form-item>
                    <div v-if="form.lucky_number">
                        <div  v-for="(item,index) in form.reward_list" :key="index" style="margin:20px 0;">
                            <el-input v-model="item.luckyNums" style="width:136px;" name="reward_list[]" placeholder="5,6,8"></el-input>
                            <span>奖励</span>
                            <el-input v-model="item.rewardValue" style="width:136px;" placeholder="100"></el-input>
                            <el-select v-model="item.rewardType" >
                                <el-option label="元" value="1"></el-option>
                                <el-option label="积分" value="2"></el-option>
                            </el-select>
                        </div>

                         <el-form-item style="text-align:center;margin:20px 0;" >
                            <el-button type="primary" @click="addReward">继续幸运数字新增</el-button>
                        </el-form-item>
                    </div>
                </el-form-item>
                <el-form-item label="奖励规则描述">
                    <quill-editor v-model="form.reward_content" ref="myQuillEditor" class="editer" :options="form.reward_editorOption" @change="reward_editor_change($event)" ></quill-editor>
                </el-form-item>
                <el-form-item label="头像">
                  <div class="comment-text">
                      <div class="load clearfix">
                        <div class="imgList"  v-if="logoImg">
                          <img :src="logoImg" >
                          <i @click="deleteLogo()" class="close"></i>
                        </div> 
                        <div class="loadImg" v-if="!logoImg" >
                            <div>上传头像</div>
                             <img src="~@/assets/add.png" alt="添加" class="add">
                            <uploadImg @imgUrl='changeImg' class="upload" :site='1'  :filePath="'goods/comment/' "></uploadImg>
                        </div>
                      </div>
                  </div>
                </el-form-item>
                <el-form-item label='背景图'>
                  <div class="comment-text">
                      <div class="load clearfix">
                        <div class="imgList"  v-if="bgImg">
                          <img :src="bgImg"  style="">
                          <i @click="deleteBgImg()" class="close"></i>
                        </div> 
                        <div class="loadImg" v-if="!bgImg">
                            <div>上传背景</div>
                             <img src="~@/assets/add.png" alt="添加" class="add">
                            <uploadImg @imgUrl='changeBgImg' class="upload"  :site='2' :filePath="'goods/comment/' "></uploadImg>
                        </div>
                      </div>
                  </div>
                </el-form-item>
                 <el-form-item style="text-align:center">
                    <el-button type="primary" size="medium" @click="onSubmit">保存</el-button>
                </el-form-item>
             </el-form>   
           
        </div>
     </div>
</template>

<script>
import { quillEditor } from "vue-quill-editor"; //调用编辑器
import vSelect from "./select_hero.vue";
export default {
  name: "app",
  data() {
    return {
      logoImg: "", //头像
      bgImg: "", //背景图
      form: {
        name: "", //赛事名称
        headline: "", //赛事标题
        session: "", //比赛场次
        cost: "", //报名费用
        count: "", //总奖金
        start_time: "", //报名开始时间
        end_time: "", //报名结束时间
        game_start_time: "", //比赛开始时间
        game_end_time: "", //比赛结束时间
        ranking_first: [], //排名规则-第一种排名方式
        ranking_second: [], //排名规则-第二种排名方式
        ranking_three: [], //排名规则-第三种排名方式
        ranking_four: [], //排名规则-第四种排名方式
        competition_first: [], //赛事规则-比赛类型
        competition_second: [], //赛事规则-地图类型
        use_hero: true, //使用英雄
        match_content: "", //规则描述
        reward_content: "", //奖励描述
        match_editorOption: {
          placeholder: "请输入比赛规则描述",
          modules: {
            toolbar: [
              [{ header: 1 }, { header: 2 }],
              [{ color: [] }, { background: [] }] // dropdown with defaults from theme
            ]
          }
        },
        reward_editorOption: {
          placeholder: "请输入比赛规则描述",
          modules: {
            toolbar: [
              [{ header: 1 }, { header: 2 }],
              [{ color: [] }, { background: [] }] // dropdown with defaults from theme
            ]
          }
        },
        first_place: "", //冠军奖金
        second_place: "", //亚军奖金
        third_place: "", //季军奖金
        first_place_type: "", //冠军奖金类型
        second_place_type: "", //亚军奖金类型
        third_place_type: "", //季军奖金类型
        lucky_number: true, //幸运数字是否开启
        reward_list: [
          {
            luckyNums: '',
            rewardValue: "",
            rewardType: "",
            // str: ""
          }
        ],
        //排名新增
        ranking_list: [
          {
            startRanking: "",
            endRanking: "",
            rewardValue: "",
            rewardType: ""
          }
        ]
      },
      count: [], //所有英雄选中
      assassinCount: [], //刺客英雄选中
      fighterCount: [], //战士英雄选中
      mageCount: [], //法师英雄选中
      marksmanCount: [], //射手英雄选中
      tankCount: [], //坦克英雄选中
      supportCount: [], //辅助英雄选中
      allHeroCount: [] //所有英雄保存数组
    };
  },
  components: {
    vSelect,
    quillEditor
  },
  computed: {
    editor() {
      return this.$refs.myQuillEditor.quill;
    },
    onEditorBlur() {
      //失去焦点事件
    }
  },

  mounted() {},

  methods: {
    //新增幸运数字奖励
    addReward() {
      this.form.reward_list.push({
        luckyNums:'',
        rewardValue: "",
        rewardType: "",
        str: ""
      });
      console.log(this.form.reward_list);
    },

    //新增排名奖励
    addRanking() {
      this.form.ranking_list.push({
        startRanking: "",
        endRanking: "",
        rewardValue: "",
        rewardType: ""
      });
      console.log(this.form.ranking_list);
    },
    //比赛规则描述
    match_editor_change({ editor, html, text }) {
      this.form.match_content = html;
      console.log(html);
    },
    //奖励规则描述
    reward_editor_change({ editor, html, text }) {
      this.form.reward_content = html;
    },
    onEditorReady(editor) {},

    //所有英雄
    allHero(count) {
      this.count = count;
    },
    //刺客英雄
    assassinHero(assassinCount) {
      this.assassinCount = assassinCount;
    },
    //战士英雄
    fighterHero(fighterCount) {
      this.fighterCount = fighterCount;
    },
    //法师英雄
    mageHero(mageCount) {
      this.mageCount = mageCount;
    },
    //射手英雄
    marksmanHero(marksmanCount) {
      this.marksmanCount = marksmanCount;
    },
    //坦克英雄
    tankHero(tankCount) {
      this.tankCount = tankCount;
    },
    //辅助英雄
    supportHero(supportCount) {
      this.supportCount = supportCount;
    },
    // 上传图片
    changeImg(data) {
      this.logoImg = data;
    },
    changeBgImg(data) {
      this.bgImg = data;
    },
    // 删除头像图片
    deleteLogo() {
      this.logoImg = "";
    },
    //删除背景图片
    deleteBgImg() {
      this.bgImg = "";
    },
    //保存提交
    async onSubmit() {
      // let self = this
      // this.form.reward_list.forEach((element,index) => {
      //     let a = element.str.split(',')
      //     console.log(self.form.reward_list[index].luckyNums.concat(a))
      //     console.log(self.form.reward_list)
      //     // self.form.reward_list.luckyNums[index].concat(a)
      // });
      let matchRewardDTO = {
        luckyRewards: this.form.reward_list,
        otherRankRewards: this.form.ranking_list
      };
      let newData = this.allHeroCount.concat(
        this.count,
        this.assassinCount,
        this.fighterCount,
        this.mageCount,
        this.marksmanCount,
        this.tankCount,
        this.supportCount
      );
      let data = {
        matchId: 0,
        matchSmallImage: this.logoImg,
        matchBackImage: this.bgImg,
        matchName: this.form.name, //赛事名称
        matchTitle: this.form.headline, //赛事标题
        palyNum: this.form.session, //比赛场次
        signFee: this.form.cost, //报名费用
        bonusAmount: this.form.count, //总奖金
        signStartTime: this.fn.format(this.form.start_time), //报名开始时间
        signEndTime: this.fn.format(this.form.end_time), //报名结束时间
        matchStartTime: this.fn.format(this.form.game_start_time), //比赛开始时间
        matchEndTime: this.fn.format(this.form.game_end_time), //比赛结束时间
        rankSort: {
          fristRule: this.form.ranking_first, //排名规则-第一种排名方式
          secondRule: this.form.ranking_second, //排名规则-第二种排名方式
          thirdRule: this.form.ranking_three, //排名规则-第三种排名方式
          fourthRule: this.form.ranking_four //排名规则-第四种排名方式
        },
        gameType: this.form.competition_first, //赛事规则-比赛类型
        battleMap: this.form.competition_second, //赛事规则-地图类型
        matchRuleText: this.form.match_content, //规则描述
        matchRewardText: this.form.reward_content, //奖励描述
        matchRewardDTO: {
          luckyRewards: this.form.reward_list,
          otherRankRewards: this.form.ranking_list
        },
        championIds: newData,
        mustRewards: [
          {
            ranKing: "1",
            rewardValue: this.form.first_place,
            rewardType: this.form.first_place_type
          },
          {
            ranKing: "2",
            rewardValue: this.form.second_place,
            rewardType: this.form.second_place_type
          },
          {
            ranKing: "3",
            rewardValue: this.form.third_place,
            rewardType: this.form.third_place_type
          }
        ]
      };
      console.log(data)
      let res = await this.$post({
        url: this.fn.chatApi + "/admin/match/saveMatch",
        data: data
      });
      if (res.code == 111111) {
         this.$message({
          type:'success',
          message:'新增成功'
        })
        this.$router.push("/competition");
      }else{
        this.$message({
          type:'error',
          message:res.message
        })
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@function px2rem($px) {
  @return $px/100 * 1rem;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 220px;
}
.el-select {
  width: 100px;
}
.el-form {
  width: 512px;
}

.el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.el-input__inner:hover {
  border-color: #e9e9e9;
}

.el-input__inner:focus {
  border-color: #42a5f5;
  box-shadow: none;
  transition-duration: 0.5s;
}

.el-input__inner::-webkit-input-placeholder {
  line-height: 20px;
}

.el-input__inner,
.el-checkbox__inner,
.el-textarea__inner,
.el-button {
  border-radius: 0;
}
.editer .ql-container {
  min-height: 200px;
}

.comment-text {
  position: relative;
  // border-bottom: 0.5px solid rgba(226, 226, 226, 0.5);
  padding: 0 px2rem(9.5);
  padding-top: px2rem(11);
  textarea {
    width: 100%;
    height: 115px;
    resize: none;
    z-index: 1;
  }
  .load {
    margin-bottom: 10px;
    .imgList:nth-child(5) {
      margin-right: 0;
    }
    .imgList {
      width: 150px;
      height: 150px;
      display: inline-block;
      float: left;
      position: relative;
      border: 1px solid #999999;
      // margin-right: px2rem(10);
      img {
        width: 100%;
        height: 100%;
      }
      .close {
        position: absolute;
        right: -9px;
        top: -9px;
        width: 18px;
        height: 18px;
        background: url("~@/assets/close.png") no-repeat;
        background-size: 100%;
      }
    }

    i {
      text-align: center;
      width: 16px;
      border: 0.5px solid #999999;
      border-radius: 50%;
      font-size: 16px;
      font-weight: bold;
      position: absolute;
      top: -10px;
      right: 0;
    }
    .loadImg {
      float: left;
      display: inline-block;
      position: relative;
      z-index: 2;
      border: 1px solid #e5e5e5;
      width: 81px;
      height: 81px;
      text-align: center;
      .upload {
        position: absolute;
        top: 0;
        left: 0;
        padding: 5px;
        width: 71px;
        height: 71px;
      }
      .add {
        width: 30px;
        height: 30px;
        // padding-top: 13.5px;
      }
      div {
        font-size: px2rem(10);
        color: #999999;
      }
    }
  }
}
</style>